<template>
	<view class="pageAll">
		<view class="pageTop">
			<view class="telInput">
				<input type="number" v-model="tel" placeholder-style="color:#b57979;" placeholder="请输入新手机号码" />
			</view>
			<view class="verifica">
				<input type="number" v-model="verCode" placeholder-style="color:#b57979;" placeholder="请输入验证码" />
				<button @click="getVer" hover-class="subActive">
					{{verBtnStr}}
				</button>
			</view>
		</view>
		<view class="bottomBtnView">
			<button class="bottomBtn" @click="submit" hover-class="subActive">
				完&nbsp&nbsp成
			</button>
		</view>
		<myToast :toastVisible="toastVisible" :tipMess="tipMess" />
		<logo class="Bottomlogo"></logo>
	</view>
</template>

<script>
	import logo from '../../../components/logo/bottomLogo.vue'
	import myToast from '../../../components/message/myToast.vue'
	import {
		HBValidate
	} from '../../../utils/tools.js'
	let interval = null
	export default {
		data() {
			return {
				tipMess: '',
				toastVisible: false,
				tel: '',
				verBtnStr: '获取验证码',
				verCode: '',
				countdown: 60, // 验证码倒计时
			}
		},
		methods: {
			getVer() {
				const validate = new HBValidate()
				if (validate.isPhone(this.tel)) {
					
					if (this.countdown === 60) {
						this.$api.code({
							mobile: this.tel,
							code_type: 'update_phone',
						}).then(res => {
							if (res.status) {

								uni.showToast({
									title: '验证码已发送',
									icon: 'none',
									duration: 1500,
								})

							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
						})
						interval = setInterval(() => {
							this.countdown--
							this.verBtnStr = this.countdown + '后重新获取'
							if (this.countdown === 0) {
								this.countdown = 60;
								this.verBtnStr = '获取验证码'
								clearInterval(interval)
							}
						}, 1000)
					}
				} else {
					uni.showToast({
						title: '手机号码格式错误',
						duration: 2000,
						icon: 'none',
					});
				}
			},
			submit() {
				const validate = new HBValidate()
				if (!validate.isPhone(this.tel)) {
					uni.showToast({
						title: '手机号码格式错误',
						duration: 2000,
						icon: 'none',
					});
				} else if (!validate.isDigits(this.verCode)) {
					uni.showToast({
						title: '验证码格式错误',
						duration: 2000,
						icon: 'none',
					});
				} else {
					this.$api.accountNameUpdate({
						phone: this.tel,
						code: this.verCode,
					}).then(res => {
						console.log(res)
						if (res.status) {
							this.toastVisible = true
							this.tipMess = '手机号码更改成功'
							setTimeout(() => {
								uni.reLaunch({
									url: '../../indexPage/login/login'
								})
								this.toastVisible = false
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
						}
					})
				}
			}
		},
		components: {
			myToast,
			logo,
		},
		onLoad(option) {
			if (option.tel) {
				this.tel = option.tel
			}
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.pageTop {}

	.pageTop view {
		height: 100upx;
		border-radius: 15upx;
		box-shadow: 0 0 30upx -15upx #f03d3d;
		margin-bottom: 15upx;
		font-size: 32upx;
		color: #b57979;
	}

	.telInput input {
		height: 100upx;
		background-color: #FFF;
		padding: 0 15upx;
		border-radius: 15upx;
	}

	.verifica {
		display: flex;
		flex-wrap: nowrap;
	}

	.verifica input {
		height: 100upx;
		background-color: #FFF;
		padding: 0 15upx;
		border-bottom-left-radius: 15upx;
		border-top-left-radius: 15upx;
		width: 65%
	}

	.verifica button {
		height: 100upx;
		background-color: #FFF;
		border-bottom-right-radius: 15upx !important;
		border-top-right-radius: 15upx !important;
		width: 35%;
		color: #FFF;
		font-size: 36upx;
		background-color: #f7533e;
		border-radius: 0;
		padding: 0;
	}

	.verifica button:after {
		border: none;
	}

	.bottomBtnView {
		margin-top: 200upx;
	}

	.bottomBtn {
		color: #FFF;
		font-size: 36upx;
		background-color: #f7533e;
		font-weight: 200;
	}

	.bottomBtn:after {
		border: none;
	}

	.subActive {
		background-color: #FF0000 !important;
	}
</style>
